<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="robots" content="index, follow">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="author" content="https://github.com/picturepan2/">
  <title>Components - Spectre.css CSS Framework</title>
  <link rel="stylesheet" href="dist/spectre.css">
  <link rel="stylesheet" href="dist/spectre-icons.css">
  <link rel="stylesheet" href="dist/spectre-exp.css">
  <link rel="stylesheet" href="css/docs.css">
</head>
<body>
  <div class="docs-container off-canvas off-canvas-sidebar-show">
    <div class="docs-navbar">
      <a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar">
        <i class="icon icon-menu"></i>
      </a>
      <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
    </div>

    <div id="sidebar" class="docs-sidebar off-canvas-sidebar">
      <div class="docs-brand">
        <a href="index.html" class="docs-logo">
          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
          <h2>SPECTRE</h2>
        </a>
      </div>
      <div class="docs-nav">
        <div class="accordion-container">
          <div class="accordion">
            <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden>
            <label class="accordion-header c-hand" for="docs-accordion-1">
              Getting started
            </label>
            <div class="accordion-body">
              <ul class="menu menu-nav">
                <li class="menu-item">
                  <a href="getting-started.html">Introduction</a>
                </li>
                <li class="menu-item">
                  <a href="getting-started.html#installation">Installation</a>
                </li>
                <li class="menu-item">
                  <a href="getting-started.html#custom">Custom version</a>
                </li>
                <li class="menu-item">
                  <a href="getting-started.html#browsers">Browser support</a>
                </li>
                <li class="menu-item">
                  <a href="getting-started.html#whatsnew">What's new</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="accordion">
            <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden>
            <label class="accordion-header c-hand" for="docs-accordion-2">
              Elements
            </label>
            <div class="accordion-body">
              <ul class="menu menu-nav">
                <li class="menu-item">
                  <a href="elements.html">Typography</a>
                </li>
                <li class="menu-item">
                  <a href="elements.html#tables">Tables</a>
                </li>
                <li class="menu-item">
                  <a href="elements.html#buttons">Buttons</a>
                </li>
                <li class="menu-item">
                  <a href="elements.html#forms">Forms</a>
                </li>
                <li class="menu-item">
                  <a href="elements.html#icons">Icons</a>
                </li>
                <li class="menu-item">
                  <a href="elements.html#labels">Labels</a>
                </li>
                <li class="menu-item">
                  <a href="elements.html#codes">Codes</a>
                </li>
                <li class="menu-item">
                  <a href="elements.html#media">Media</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="accordion">
            <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden>
            <label class="accordion-header c-hand" for="docs-accordion-3">
              Layout
            </label>
            <div class="accordion-body">
              <ul class="menu menu-nav">
                <li class="menu-item">
                  <a href="layout.html">Flexbox grid</a>
                </li>
                <li class="menu-item">
                  <a href="layout.html#responsive">Responsive</a>
                </li>
                <li class="menu-item">
                  <a href="layout.html#navbar">Navbar</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="accordion">
            <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden checked>
            <label class="accordion-header c-hand" for="docs-accordion-4">
              Components
            </label>
            <div class="accordion-body">
              <ul class="menu menu-nav">
                <li class="menu-item">
                  <a href="components.html">Accordions</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#autocomplete">Autocomplete</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#avatars">Avatars</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#badges">Badges</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#bars">Bars</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#breadcrumbs">Breadcrumbs</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#cards">Cards</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#chips">Chips</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#empty">Empty states</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#menus">Menus</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#modals">Modals</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#navs">Navs</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#pagination">Pagination</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#panels">Panels</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#popovers">Popovers</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#steps">Steps</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#tabs">Tabs</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#tiles">Tiles</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#toasts">Toasts</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#tooltips">Tooltips</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="accordion">
            <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden>
            <label class="accordion-header c-hand" for="docs-accordion-5">
              Utilities
            </label>
            <div class="accordion-body">
              <ul class="menu menu-nav">
                <li class="menu-item">
                  <a href="utilities.html">Colors</a>
                </li>
                <li class="menu-item">
                  <a href="utilities.html#cursors">Cursors</a>
                </li>
                <li class="menu-item">
                  <a href="utilities.html#display">Display</a>
                </li>
                <li class="menu-item">
                  <a href="utilities.html#divider">Divider</a>
                </li>
                <li class="menu-item">
                  <a href="utilities.html#loading">Loading</a>
                </li>
                <li class="menu-item">
                  <a href="utilities.html#position">Position</a>
                </li>
                <li class="menu-item">
                  <a href="utilities.html#shapes">Shapes</a>
                </li>
                <li class="menu-item">
                  <a href="utilities.html#text">Text</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="accordion">
            <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden>
            <label class="accordion-header c-hand" for="docs-accordion-6">
              Experimentals
            </label>
            <div class="accordion-body">
              <ul class="menu menu-nav">
                <li class="menu-item">
                  <a href="experimentals.html">Calendars</a>
                </li>
                <li class="menu-item">
                  <a href="experimentals.html#carousels">Carousels</a>
                </li>
                <li class="menu-item">
                  <a href="experimentals.html#comparison">Comparison sliders</a>
                </li>
                <li class="menu-item">
                  <a href="experimentals.html#filters">Filters</a>
                </li>
                <li class="menu-item">
                  <a href="experimentals.html#meters">Meters</a>
                </li>
                <li class="menu-item">
                  <a href="experimentals.html#off-canvas">Off-canvas</a>
                </li>
                <li class="menu-item">
                  <a href="experimentals.html#parallax">Parallax</a>
                </li>
                <li class="menu-item">
                  <a href="experimentals.html#progress">Progress</a>
                </li>
                <li class="menu-item">
                  <a href="experimentals.html#sliders">Sliders</a>
                </li>
                <li class="menu-item">
                  <a href="experimentals.html#timelines">Timelines</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <a class="off-canvas-overlay" href="#close"></a>

    <div id="content" class="docs-content off-canvas-content">
      <div id="components" class="container">
        <h3 class="s-title"><a href="#components" class="anchor" aria-hidden="true">#</a>Components</h3>
      </div>

      <div class="container">
        <div class="docs-ad">
          <div class="hide-md">
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- GitHub-lg -->
            <ins class="adsbygoogle"
                  style="display:inline-block;width:728px;height:90px"
                  data-ad-client="ca-pub-2225124559530218"
                  data-ad-slot="9894180784"></ins>
            <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
          </div>
          <div class="show-md">
            <!-- GitHub-sm -->
            <ins class="adsbygoogle"
                  style="display:inline-block;width:300px;height:250px"
                  data-ad-client="ca-pub-2225124559530218"
                  data-ad-slot="9278881734"></ins>
            <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
          </div>
        </div>
      </div>
      
      <div id="accordions" class="container">
        <h3 class="s-title"><a href="#accordions" class="anchor" aria-hidden="true">#</a>Accordions</h3>
        <div class="docs-note">
          <p>Accordions are used to toggle sections of content.</p>
        </div>
        <div class="columns">
          <div class="column col-6 col-md-12">
            <div class="accordion">
              <input type="radio" id="accordion-1" name="accordion-radio" hidden checked>
              <label class="accordion-header c-hand" for="accordion-1">
                <i class="icon icon-arrow-right mr-1"></i>
                Elements
              </label>
              <div class="accordion-body">
                <ul class="menu menu-nav">
                  <li class="menu-item">
                    <a href="#accordions">Element 1</a>
                  </li>
                  <li class="menu-item">
                    <a href="#accordions">Element 2</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="accordion">
              <input type="radio" id="accordion-2" name="accordion-radio" hidden>
              <label class="accordion-header c-hand" for="accordion-2">
                <i class="icon icon-arrow-right mr-1"></i>
                Layout
              </label>
              <div class="accordion-body">
                <ul class="menu menu-nav">
                  <li class="menu-item">
                    <a href="#accordions">Layout 1</a>
                  </li>
                  <li class="menu-item">
                    <a href="#accordions">Layout 2</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="accordion">
              <input type="radio" id="accordion-3" name="accordion-radio" hidden>
              <label class="accordion-header c-hand" for="accordion-3">
                <i class="icon icon-arrow-right mr-1"></i>
                Components
              </label>
              <div class="accordion-body">
                <ul class="menu menu-nav">
                  <li class="menu-item">
                    <a href="#accordions">Component 1</a>
                  </li>
                  <li class="menu-item">
                    <a href="#accordions">Component 2</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="column col-6 col-md-12">
            <div class="accordion">
              <input type="checkbox" id="accordion-4" name="accordion-checkbox" hidden checked>
              <label class="accordion-header c-hand" for="accordion-4">
                Elements
              </label>
              <div class="accordion-body">
                <ul class="menu menu-nav">
                  <li class="menu-item">
                    <a href="#accordions">Element 1</a>
                  </li>
                  <li class="menu-item">
                    <a href="#accordions">Element 2</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="accordion">
              <input type="checkbox" id="accordion-5" name="accordion-checkbox" hidden>
              <label class="accordion-header c-hand" for="accordion-5">
                Layout
              </label>
              <div class="accordion-body">
                <ul class="menu menu-nav">
                  <li class="menu-item">
                    <a href="#accordions">Layout 1</a>
                  </li>
                  <li class="menu-item">
                    <a href="#accordions">Layout 2</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="accordion">
              <input type="checkbox" id="accordion-6" name="accordion-checkbox" hidden>
              <label class="accordion-header c-hand" for="accordion-6">
                Components
              </label>
              <div class="accordion-body">
                <ul class="menu menu-nav">
                  <li class="menu-item">
                    <a href="#accordions">Component 1</a>
                  </li>
                  <li class="menu-item">
                    <a href="#accordions">Component 2</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

<!-- accordions -->
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- standard Accordions example --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;accordion&quot;</span>&gt;
  &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;checkbox&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;accordion-1&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;accordion-checkbox&quot;</span> <span class="atn">hidden</span>&gt;
  &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;accordion-header&quot;</span>&gt;
    &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-right mr-1&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
    Title
  &lt;<span class="tag">/label</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;accordion-body&quot;</span>&gt;
    <span class="com">&lt;!-- Accordions content --&gt;</span>
  &lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/div</span>&gt;

<span class="com">&lt;!-- mutually exclusive Accordions example (with same input names) --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;accordion&quot;</span>&gt;
  &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;accordion-1&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;accordion-radio&quot;</span> <span class="atn">hidden</span>&gt;
  &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;accordion-header&quot;</span>&gt;
    Title
  &lt;<span class="tag">/label</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;accordion-body&quot;</span>&gt;
    <span class="com">&lt;!-- Accordions content --&gt;</span>
  &lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>

        <div class="docs-note">
          <p>Alternatively, you can use <code>details</code> and <code>summary</code> instead of <code>input</code> radio or checkbox trick. Add the <code>open</code> attribute to <code>details</code> to expand it. Microsoft Edge support is <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/" target="_blank">in development</a>.</p>
        </div>

<!-- accordions -->
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- details and summary Accordions example --&gt;</span>
&lt;<span class="tag">details</span> <span class="atn">class</span>=<span class="atv">&quot;accordion&quot;</span> <span class="atn">open</span>&gt;
  &lt;<span class="tag">summary</span> <span class="atn">class</span>=<span class="atv">&quot;accordion-header&quot;</span>&gt;
    &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-right mr-1&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
    Title
  &lt;<span class="tag">/summary</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;accordion-body&quot;</span>&gt;
    <span class="com">&lt;!-- Accordions content --&gt;</span>
  &lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/details</span>&gt;
</code></pre>

      </div>

      <div class="container">
        <div class="docs-ad docs-ad-sidebar">
          <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
          <!-- github-vertical-sm -->
          <ins class="adsbygoogle"
              style="display:inline-block;width:120px;height:240px"
              data-ad-client="ca-pub-2225124559530218"
              data-ad-slot="5087273059"></ins>
          <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
          </script>
        </div>
      </div>

      <div id="autocomplete" class="container">
        <h3 class="s-title"><a href="#autocomplete" class="anchor" aria-hidden="true">#</a>Autocomplete</h3>
        <div class="docs-note">
          <p>Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. </p>
        </div>
        <div class="columns">
          <div class="column col-9 col-xs-12">
            <div class="form-group">
              <div class="form-autocomplete">
                <div class="form-autocomplete-input form-input">
                  <span class="chip">
                    Bruce Banner
                  </span>
                  <div class="chip">
                    <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Avatar">
                    Thor Odinson
                  </div>
                  <div class="chip">
                    <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Avatar">
                    Steve Rogers
                  </div>
                  <div class="chip">
                    <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure>
                    Tony Stark
                  </div>
                  <span class="chip active">
                    Natasha Romanoff
                  </span>
                  <input class="form-input" type="text" placeholder="">
                </div>
              </div>
            </div>
          </div>
          <div class="column col-9 col-xs-12">
            <div class="form-group">
              <div class="form-autocomplete">
                <div class="form-autocomplete-input form-input is-focused">
                  <span class="chip">
                    Bruce Banner
                    <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
                  </span>
                  <span class="chip">
                    <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson">
                    Thor Odinson
                    <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
                  </span>
                  <div class="has-icon-left">
                    <input class="form-input" type="text" placeholder="" value="S">
                    <i class="form-icon loading"></i>
                  </div>
                </div>
                <ul class="menu">
                  <li class="menu-item">
                    <a href="#autocomplete">
                      <div class="tile tile-centered">
                        <div class="tile-icon">
                          <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers">
                        </div>
                        <div class="tile-content">
                          <mark>S</mark>teve Roger<mark>s</mark>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="#autocomplete">
                      <div class="tile tile-centered">
                        <div class="tile-icon">
                          <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure>
                        </div>
                        <div class="tile-content">
                          Tony <mark>S</mark>tark
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="docs-note">
          <p>Add a container element with the <code>form-autocomplete</code> class. There are 2 parts of it, one is <code>form-autocomplete-input</code>, another is <code>menu</code> component. You may add the <code>is-focused</code> class to <code>form-autocomplete-input</code> to make it appear as focus state.</p>
          <p>Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. The autocomplete HTML structure is exampled below.</p>
        </div>

<!-- autocomplete -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-autocomplete&quot;</span>&gt;
  <span class="com">&lt;!-- autocomplete input container --&gt;</span>
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-autocomplete-input form-input&quot;</span>&gt;

    <span class="com">&lt;!-- autocomplete chips --&gt;</span>
    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
      &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-sm&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;Thor Odinson&quot;</span>&gt;
      Thor Odinson
      &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;button&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
    &lt;<span class="tag">/div</span>&gt;

    <span class="com">&lt;!-- autocomplete real input box --&gt;</span>
    &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;typing here&quot;</span>&gt;
  &lt;<span class="tag">/div</span>&gt;

  <span class="com">&lt;!-- autocomplete suggestion list --&gt;</span>
  &lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;menu&quot;</span>&gt;
    <span class="com">&lt;!-- menu list chips --&gt;</span>
    &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
      &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
        &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile tile-centered&quot;</span>&gt;
          &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-icon&quot;</span>&gt;
            &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-4.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-sm&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;Steve Rogers&quot;</span>&gt;
          &lt;<span class="tag">/div</span>&gt;
          &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-content&quot;</span>&gt;
            Steve Rogers
          &lt;<span class="tag">/div</span>&gt;
        &lt;<span class="tag">/div</span>&gt;
      &lt;<span class="tag">/a</span>&gt;
    &lt;<span class="tag">/li</span>&gt;
  &lt;<span class="tag">/ul</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>

      </div>

      <div id="avatars" class="container">
        <h3 class="s-title"><a href="#avatars" class="anchor" aria-hidden="true">#</a>Avatars</h3>
        <div class="docs-note">
          <p>Avatars are user profile pictures. </p>
        </div>
        <div class="columns">
          <div class="column col-6 col-xs-12">
            <figure class="avatar avatar-xl">
              <img src="img/avatar-1.png" alt="Avatar XL">
            </figure>
            <figure class="avatar avatar-lg">
              <img src="img/avatar-2.png" alt="Avatar LG">
            </figure>
            <figure class="avatar">
              <img src="img/avatar-3.png" alt="Avatar">
            </figure>
            <figure class="avatar avatar-sm">
              <img src="img/avatar-4.png" alt="Avatar SM">
            </figure>
            <figure class="avatar avatar-xs">
              <img src="img/avatar-5.png" alt="Avatar XS">
            </figure>
          </div>
          <div class="column col-6 col-xs-12">
            <figure class="avatar avatar-xl" data-initial="YZ"></figure>
            <figure class="avatar avatar-lg" data-initial="YZ"></figure>
            <figure class="avatar" data-initial="YZ"></figure>
            <figure class="avatar avatar-sm" data-initial="YZ"></figure>
            <figure class="avatar avatar-xs" data-initial="YZ"></figure>
          </div>
        </div>
        <div class="docs-note">
          <p>Add the <code>avatar</code> class to &lt;img&gt; element. There are 4 additional sizes available, including <code>avatar-xl</code> (64px), <code>avatar-lg</code> (48px), <code>avatar-sm</code> (24px), and <code>avatar-xs</code> (16px). By default, the avatar size is 32px.</p>
          <p>For users who don't have profile pictures, you may use their initials for avatars. Add the <code>avatar</code> class and avatar size class to &lt;div&gt; element. The <code>data-initial</code> attribute is the name appear inside the avatar.</p>
        </div>
        <div class="columns">
          <div class="column col-6 col-xs-12">
            <figure class="avatar avatar-xl">
              <img src="img/avatar-1.png" alt="Avatar">
              <img src="img/avatar-2.png" class="avatar-icon" alt="Avatar">
            </figure>
            <figure class="avatar avatar-lg">
              <img src="img/avatar-2.png" alt="Avatar">
              <img src="img/avatar-3.png" class="avatar-icon" alt="Avatar">
            </figure>
            <figure class="avatar">
              <img src="img/avatar-3.png" alt="Avatar">
              <img src="img/avatar-4.png" class="avatar-icon" alt="Avatar">
            </figure>
            <figure class="avatar avatar-sm">
              <img src="img/avatar-4.png" alt="Avatar">
              <img src="img/avatar-5.png" class="avatar-icon" alt="Avatar">
            </figure>
            <figure class="avatar avatar-xs">
              <img src="img/avatar-5.png" alt="Avatar">
              <img src="img/avatar-1.png" class="avatar-icon" alt="Avatar">
            </figure>
          </div>
        </div>

<!-- avatars -->
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- Basic avatar examples --&gt;</span>
&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span>&gt;
  &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span>&gt;
&lt;<span class="tag">/figure</span>&gt;

&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span>&gt;
  &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span>&gt;
  &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-5.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar-icon&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span>&gt;
&lt;<span class="tag">/figure</span>&gt;

&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span> <span class="atn">data-initial</span>=<span class="atv">&quot;YZ&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;background-color: #5755d9;&quot;</span>&gt;&lt;<span class="tag">/figure</span>&gt;

<span class="com">&lt;!-- Show initals when avatar image is unavailable or not fully loaded --&gt;</span>
&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span> <span class="atn">data-initial</span>=<span class="atv">&quot;YZ&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;background-color: #5755d9;&quot;</span>&gt;
  &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span>&gt;
&lt;<span class="tag">/figure</span>&gt;
</code></pre>

        <div class="columns">
          <div class="column col-6 col-xs-12">
            <figure class="avatar avatar-xl" data-initial="YZ">
              <i class="avatar-presence online"></i>
            </figure>
            <figure class="avatar avatar-lg" data-initial="YZ">
              <i class="avatar-presence busy"></i>
            </figure>
            <figure class="avatar" data-initial="YZ">
              <i class="avatar-presence away"></i>
            </figure>
            <figure class="avatar avatar-sm" data-initial="YZ">
              <i class="avatar-presence offline"></i>
            </figure>
            <figure class="avatar avatar-xs" data-initial="YZ">
              <i class="avatar-presence online"></i>
            </figure>
          </div>
        </div>
        <div class="docs-note">
          <p>Avatars support presence indicators. You can add an <code>i</code> element with the <code>avatar-presence</code> class, and add <code>online</code>, <code>busy</code> or <code>away</code> class for different status colors. The default is gray which means offline. </p>
        </div>

<!-- avatars -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span>&gt;
  &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span>&gt;
  &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;avatar-presence online&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
&lt;<span class="tag">/figure</span>&gt;
</code></pre>

      </div>

      <div id="badges" class="container">
        <h3 class="s-title"><a href="#badges" class="anchor" aria-hidden="true">#</a>Badges</h3>
        <div class="docs-note">
          <p>Badges are often used as unread number indicators.</p>
        </div>
        <div class="columns">
          <div class="column col-3 col-xs-6">
            <span class="badge" data-badge="">
              Notifications
            </span>
          </div>
          <div class="column col-3 col-xs-6">
            <span class="badge" data-badge="8">
              Notifications
            </span>
          </div>
          <div class="column col-3 col-xs-6">
            <span class="badge" data-badge="88">
              Notifications
            </span>
          </div>
          <div class="column col-3 col-xs-6">
            <span class="badge" data-badge="888">
              Notifications
            </span>
          </div>
        </div>
        <div class="docs-note">
          <p>Add the <code>badge</code> class to non self closing elements. And add the <code>data-badge</code> attribute to define the content of a badge. The badge will appear in the top-right direction of the element. </p>
          <p>If there is no <code>data-badge</code> or the attribute is not specified, the badge will appear as a dot.</p>
        </div>
        <div class="columns">
          <div class="column col-sm-12">
            <button class="btn badge" data-badge="">Button</button>
            <button class="btn badge" data-badge="8">Button</button>
          </div>
          <div class="column col-sm-12">
            <button class="btn btn-primary badge" data-badge="">Button</button>
            <button class="btn btn-primary badge" data-badge="8">Button</button>
          </div>
          <div class="column col-sm-12">
            <figure class="avatar avatar-xl badge" data-badge="8" data-initial="YZ">
              <img src="img/avatar-1.png" alt="YZ">
            </figure>
            <figure class="avatar avatar-lg badge" data-badge="8" data-initial="YZ">
              <img src="img/avatar-2.png" alt="YZ">
            </figure>
            <figure class="avatar badge" data-badge="8" data-initial="YZ">
              <img src="img/avatar-3.png" alt="YZ">
            </figure>
          </div>
        </div>
        <div class="docs-note">
          <p>Badges support <code>button</code> and <code>avatars</code> elements as well. </p>
        </div>

<!-- badges -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;badge&quot;</span>&gt;
  Notifications
&lt;<span class="tag">/span</span>&gt;

&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;badge&quot;</span> <span class="atn">data-badge</span>=<span class="atv">&quot;8&quot;</span>&gt;
  Notifications
&lt;<span class="tag">/span</span>&gt;

&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn badge&quot;</span> <span class="atn">data-badge</span>=<span class="atv">&quot;8&quot;</span>&gt;
  Button
&lt;<span class="tag">/button</span>&gt;

&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar badge&quot;</span> <span class="atn">data-badge</span>=<span class="atv">&quot;8&quot;</span> <span class="atn">data-initial</span>=<span class="atv">&quot;YZ&quot;</span>&gt;
  &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-3.png&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;YZ&quot;</span>&gt;
&lt;<span class="tag">/figure</span>&gt;
</code></pre>

      </div>

      <div id="bars" class="container">
        <h3 class="s-title"><a href="#bars" class="anchor" aria-hidden="true">#</a>Bars</h3>
        <div class="docs-note">
          <p>Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <code>progress</code>, <code>meter</code> and <code>input range</code> elements.</p>
        </div>
        <div class="columns">
          <div class="column col-8 col-xs-12">
            <div class="bar bar-sm">
              <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>
        </div>
        <div class="columns">
          <div class="column col-8 col-xs-12">
            <div class="bar">
              <div class="bar-item tooltip" data-tooltip="50%" role="progressbar" style="width:50%;"></div>
            </div>
          </div>
        </div>
        <div class="columns">
          <div class="column col-8 col-xs-12">
            <div class="bar">
              <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;">25%</div>
              <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;background:#817fe3;">15%</div>
              <div class="bar-item tooltip" data-tooltip="10%" role="progressbar" style="width:10%;background:#aaa9eb;">10%</div>
              <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;">15%</div>
            </div>
          </div>
        </div>
        <div class="docs-note">
          <p>Add a container element with the <code>bar</code> class. And add child elements with the <code>bar-item</code> class. The width percentage value is needed for every <code>bar-item</code>.</p>
          <p>There is the <code>bar-sm</code> class for thinner Bars. Also, you could use <a href="#tooltips">Tooltips</a> for any <code>bar-item</code>.</p>
        </div>

<!-- bars -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar bar-sm&quot;</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;progressbar&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:25%;&quot;</span> <span class="atn">aria-valuenow</span>=<span class="atv">&quot;25&quot;</span> <span class="atn">aria-valuemin</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">aria-valuemax</span>=<span class="atv">&quot;100&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/div</span>&gt;

<span class="com">&lt;!-- multi-bars --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar&quot;</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item tooltip&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;25%&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:25%;&quot;</span>&gt;25%&lt;<span class="tag">/div</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:15%;background:#818bd5;&quot;</span>&gt;15%&lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>

        <h4 id="bars-slider" class="s-subtitle">Slider bars</h4>
        <div class="columns">
          <div class="column col-8 col-xs-12">
            <div class="bar bar-slider">
              <div class="bar-item" role="progressbar" style="width:50%;">
                <button class="bar-slider-btn btn tooltip" data-tooltip="50%" role="slider"></button>
              </div>
            </div>
          </div>
        </div>
        <div class="columns">
          <div class="column col-8 col-xs-12">
            <div class="bar bar-slider">
              <div class="bar-item" role="progressbar" style="width:15%;">
                <button class="bar-slider-btn btn tooltip" data-tooltip="25%" role="slider"></button>
              </div>
              <div class="bar-item" role="progressbar" style="width:65%;">
                <button class="bar-slider-btn btn tooltip" data-tooltip="65%" role="slider"></button>
              </div>
            </div>
          </div>
        </div>

        <div class="docs-note">
          <p>You can add the <code>bar-slider</code> class to the Bars container. And add child elements with the <code>bar-item</code> class and <code>bar-slider-btn</code> inside bar-item. You need to set the <code>bar-item</code> width manually to have the slider point.</p>
          <p>If there are two <code>bar-item</code> divs in one bar-slider, you will have a range slider.</p>
        </div>

<!-- slider bars -->
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- slider --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar bar-slider&quot;</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;progressbar&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:25%;&quot;</span>&gt;
    &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;bar-slider-btn btn&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;slider&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
  &lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/div</span>&gt;

<span class="com">&lt;!-- range slider --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar bar-slider&quot;</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;progressbar&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:15%;&quot;</span>&gt;
    &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;bar-slider-btn btn&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;slider&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
  &lt;<span class="tag">/div</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;progressbar&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:65%;&quot;</span>&gt;
    &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;bar-slider-btn btn&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;slider&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
  &lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>

      </div>

      <div id="breadcrumbs" class="container">
        <h3 class="s-title"><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</a>Breadcrumbs</h3>
        <div class="docs-note">
          <p>Breadcrumbs are used as navigational hierarchies to indicate current location.</p>
        </div>
        <div class="columns">
            <div class="column col-12">
                <ul class="breadcrumb">
                  <li class="breadcrumb-item">
                    <a href="#breadcrumbs" class="tooltip" data-tooltip="Home">Home</a>
                  </li>
                  <li class="breadcrumb-item">
                    <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings">Settings</a>
                  </li>
                </ul>
              </div>
          <div class="column col-12">
            <ul class="breadcrumb">
              <li class="breadcrumb-item">
                <a href="#breadcrumbs" class="tooltip" data-tooltip="Home">Home</a>
              </li>
              <li class="breadcrumb-item">
                <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings">Settings</a>
              </li>
              <li class="breadcrumb-item">
                <a href="#breadcrumbs" class="tooltip" data-tooltip="Change avatar">Change avatar</a>
              </li>
            </ul>
          </div>
          <div class="column col-12">
            <ul class="breadcrumb">
              <li class="breadcrumb-item">
                <a href="#breadcrumbs" class="tooltip" data-tooltip="Home">Home</a>
              </li>
              <li class="breadcrumb-item">
                <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings">Settings</a>
              </li>
              <li class="breadcrumb-item">Search result:
                <a href="#breadcrumbs" class="tooltip" data-tooltip="Search result: Spectre">Spectre</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="docs-note">
          <p>Add a container element with the <code>breadcrumb</code> class. And add child elements with the <code>breadcrumb-item</code> class.</p>
        </div>

<!-- breadcrumbs -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;breadcrumb&quot;</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;breadcrumb-item&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Home&lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;breadcrumb-item&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Settings&lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;breadcrumb-item&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Change avatar&lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
&lt;<span class="tag">/ul</span>&gt;
</code></pre>

      </div>

      <div id="cards" class="container">
        <h3 class="s-title"><a href="#cards" class="anchor" aria-hidden="true">#</a>Cards</h3>
        <div class="docs-note">
          <p>Cards are flexible content containers.</p>
        </div>
        <div class="columns">
          <div class="column col-6 col-xs-12">
            <div class="card">
              <div class="card-image">
                <img class="img-responsive" src="img/osx-el-capitan.jpg" alt="OS X El Capitan">
              </div>
              <div class="card-header">
                <div class="card-title h5">Microsoft</div>
                <div class="card-subtitle text-gray">Software and hardware</div>
              </div>
              <div class="card-body">
                Empower every person and every organization on the planet to achieve more.
              </div>
              <div class="card-footer">
                <a href="#cards" class="btn btn-primary">Do</a>
              </div>
            </div>
          </div>
          <div class="column col-6 col-xs-12">
            <div class="card">
              <div class="card-header">
                <div class="card-title h5">Apple</div>
                <div class="card-subtitle text-gray">Hardware and software</div>
              </div>
              <div class="card-image">
                <img class="img-responsive" src="img/osx-yosemite.jpg" alt="OS X Yosemite">
              </div>
              <div class="card-body">
                To make a contribution to the world by making tools for the mind that advance humankind.
              </div>
              <div class="card-footer">
                <div class="btn-group btn-group-block">
                  <button class="btn btn-primary">Buy</button>
                  <button class="btn">Buy</button>
                  <button class="btn">Buy</button>
                </div>
              </div>
            </div>
          </div>
          <div class="column col-6 col-xs-12">
            <div class="card">
              <div class="card-image">
                <img class="img-responsive" src="img/macos-sierra-2.jpg" alt="macOS Sierra">
              </div>
              <div class="card-header">
                <button class="btn btn-primary float-right"><i class="icon icon-plus"></i></button>
                <div class="card-title h5">Google I/O</div>
                <div class="card-subtitle text-gray">Software and hardware</div>
              </div>
              <div class="card-body">
                An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
              </div>
            </div>
          </div>
          <div class="column col-6 col-xs-12">
            <div class="card">
              <div class="card-image">
                <img class="img-responsive" src="img/osx-el-capitan-2.jpg" alt="OS X El Capitan">
              </div>
              <div class="card-footer">
                <a href="#cards" class="btn btn-primary">Buy</a>
                <a href="#cards" class="btn btn-link">Share</a>
              </div>
              <div class="card-body">
                <strong>Surface Studio</strong>. Turn your desk into a Studio. Surface Studio is designed for the creative process.
              </div>
            </div>
          </div>
          <div class="column col-6 col-xs-12">
            <div class="card">
              <div class="card-header">
                <div class="card-title h5">Apple</div>
                <div class="card-subtitle text-gray">Hardware and software</div>
              </div>
              <div class="card-body">
                To make a contribution to the world by making tools for the mind that advance humankind.
              </div>
              <div class="card-image">
                <img class="img-responsive" src="img/macos-sierra.jpg" alt="macOS Sierra">
              </div>
            </div>
          </div>
          <div class="column col-6 col-xs-12">
            <div class="card">
              <div class="card-header">
                <div class="card-title h5">Google</div>
                <div class="card-subtitle text-gray">Software and hardware</div>
              </div>
              <div class="card-body">
                Organize the world’s information and make it universally accessible and useful.
              </div>
              <div class="card-image">
                <img class="img-responsive" src="img/osx-yosemite-2.jpg" alt="OS X Yosemite">
              </div>
              <div class="card-footer">
                <a href="#cards" class="btn btn-primary">Search</a>
                <a href="#cards" class="btn btn-link">Share</a>
              </div>
            </div>
          </div>
        </div>
        <div class="docs-note">
          <p>Add a container element with the <code>card</code> class. And add child elements with the <code>card-image</code>, <code>card-header</code>, <code>card-body</code> and/or <code>card-footer</code> classes. The <code>card-image</code> can be placed in any position. </p>
        </div>

<!-- cards -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card&quot;</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-image&quot;</span>&gt;
    &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive&quot;</span>&gt;
  &lt;<span class="tag">/div</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-header&quot;</span>&gt;
    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-title h5&quot;</span>&gt;Microsoft&lt;<span class="tag">/div</span>&gt;
    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-subtitle text-gray&quot;</span>&gt;Software and hardware&lt;<span class="tag">/div</span>&gt;
  &lt;<span class="tag">/div</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-body&quot;</span>&gt;
    Empower every person and every organization on the planet to achieve more.
  &lt;<span class="tag">/div</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-footer&quot;</span>&gt;
    &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;Do&lt;<span class="tag">/button</span>&gt;
  &lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>

      </div>

      <div id="chips" class="container">
        <h3 class="s-title"><a href="#chips" class="anchor" aria-hidden="true">#</a>Chips</h3>
        <div class="docs-note">
          <p>Chips are complex entities in small blocks. </p>
        </div>
        <div class="columns">
          <div class="column col-12">
            <span class="chip">
              Crime
            </span>
            <span class="chip">
              Drama
            </span>
            <span class="chip">
              Biography
              <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
            </span>
            <span class="chip">
              Mystery
              <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
            </span>
          </div>
          <div class="column col-12">
            <div class="chip">
              <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure>
              Tony Stark
            </div>
            <div class="chip">
              <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson">
              Thor Odinson
            </div>
            <div class="chip">
              <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers">
              Steve Rogers
            </div>
          </div>
        </div>
        <div class="docs-note">
          <p>Add a container element with the <code>chip</code> class. And add child text element, buttons or avatars with the <code>avatar</code> class.</p>
        </div>

<!-- chips -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;Crime&lt;<span class="tag">/span</span>&gt;
  
&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
  Biography
  &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;button&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
&lt;<span class="tag">/span</span>&gt;

&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
  &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-sm&quot;</span>&gt;
  Yan Zhu
  &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;button&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
&lt;<span class="tag">/div</span>&gt;</code>
</pre>

      </div>

      <div id="empty" class="container">
        <h3 class="s-title"><a href="#empty" class="anchor" aria-hidden="true">#</a>Empty states</h3>
        <div class="docs-note">
          <p>Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.</p>
        </div>
        <div class="columns">
          <div class="column col-12">
            <div class="empty">
              <div class="empty-icon">
                <i class="icon icon-3x icon-mail"></i>
              </div>
              <p class="empty-title h5">You have no new messages</p>
              <p class="empty-subtitle">Click the button to start a conversation</p>
              <div class="empty-action">
                <button class="btn btn-primary">Send a message</button>
              </div>
            </div>
          </div>
          <div class="column col-12">
            <div class="empty">
              <div class="empty-icon">
                <i class="icon icon-3x icon-mail"></i>
              </div>
              <p class="empty-title h5">You've successfully signed up</p>
              <p class="empty-subtitle">Click the button to invite your friends</p>
              <div class="empty-action">
                <button class="btn btn-primary">Invite your friends</button>
              </div>
              <div class="empty-action">
                <button class="btn btn-link">Skip</button>
              </div>
            </div>
          </div>
          <div class="column col-12">
            <div class="empty">
              <div class="empty-icon">
                <i class="icon icon-3x icon-people"></i>
              </div>
              <p class="empty-title h5">You are not following anyone</p>
              <p class="empty-subtitle">Start to meet new friends</p>
              <div class="empty-action input-group input-inline">
                <input type="text" class="form-input" placeholder="">
                <button class="btn btn-primary input-group-btn">Search</button>
              </div>
            </div>
          </div>
        </div>

        <div class="docs-note">
          <p>An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. Add <code>empty-icon</code>, <code>empty-title</code>, <code>empty-subtitle</code> or <code>empty-action</code> to the elements. HTML structure is exampled below. </p>
        </div>

<!-- empty states -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;empty&quot;</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;empty-icon&quot;</span>&gt;
    &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-people&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
  &lt;<span class="tag">/div</span>&gt;
  &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;empty-title h5&quot;</span>&gt;You have no new messages&lt;<span class="tag">/p</span>&gt;
  &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;empty-subtitle&quot;</span>&gt;Click the button to start a conversation.&lt;<span class="tag">/p</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;empty-action&quot;</span>&gt;
    &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;Send a message&lt;<span class="tag">/button</span>&gt;
  &lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>

      </div>

      <div id="menus" class="container">
        <h3 class="s-title"><a href="#menus" class="anchor" aria-hidden="true">#</a>Menus</h3>
        <div class="docs-note">
          <p>Menus are vertical list of links or buttons for actions and navigation.</p>
        </div>
        <div class="columns">
          <div class="column col-4 col-xs-12">
            <ul class="menu">
              <li class="menu-item">
                <div class="tile tile-centered">
                  <div class="tile-icon">
                    <img src="img/avatar-4.png" class="avatar" alt="Avatar">
                  </div>
                  <div class="tile-content">
                    Steve Rogers
                  </div>
                </div>
              </li>
              <li class="divider"></li>
              <li class="menu-item">
                <div class="menu-badge">
                  <label class="label label-primary">2</label>
                </div>
                <a href="#menus" class="active">
                  My profile
                </a>
              </li>
              <li class="menu-item">
                <a href="#menus">
                  Settings
                </a>
              </li>
              <li class="menu-item">
                <a href="#menus">
                  Logout
                </a>
              </li>
            </ul>
          </div>
          <div class="column col-4 col-xs-12">
            <ul class="menu">
              <li class="divider" data-content="LINKS"></li>
              <li class="menu-item">
                <a href="#menus">Slack</a>
              </li>
              <li class="menu-item">
                <a href="#menus">Hipchat</a>
              </li>
              <li class="menu-item">
                <a href="#menus">Skype</a>
              </li>
            </ul>
          </div>
          <div class="column col-4 col-xs-12">
            <ul class="menu">
              <li class="menu-item">
                <a href="#menus">Slack</a>
              </li>
              <li class="menu-item">
                <a href="#menus">Hipchat</a>
              </li>
              <li class="menu-item">
                <a href="#menus">Skype</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="docs-note">
          <p>Add a container element with the <code>menu</code> class. And add child elements with the <code>menu-item</code> class. You can separate menu items with a <code>divider</code>. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.</p>
        </div>

<!-- menus -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;menu&quot;</span>&gt;
  <span class="com">&lt;!-- menu header text --&gt;</span>
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;divider&quot;</span> <span class="atn">data-content</span>=<span class="atv">&quot;LINKS&quot;</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
  <span class="com">&lt;!-- menu item --&gt;</span>
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
      &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-link&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Slack
    &lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
  <span class="com">&lt;!-- menu divider --&gt;</span>
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;divider&quot;</span>&gt;&lt;<span class="tag">/li</span>&gt;
  <span class="com">&lt;!-- menu item with badge --&gt;</span>
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;menu-badge&quot;</span>&gt;
      &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;label label-primary&quot;</span>&gt;2&lt;<span class="tag">/label</span>&gt;
    &lt;<span class="tag">/div</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
      &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-link&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Settings
    &lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
&lt;<span class="tag">/ul</span>&gt;
</code></pre>

        <h4 id="dropdowns" class="s-subtitle"><a href="#dropdowns" class="anchor" aria-hidden="true">#</a>Dropdown menus</h4>
        <div class="docs-note">
          <p>The dropdown is a combination of buttons and menus.</p>
        </div>
        <div class="columns">
          <div class="column col-xs-12">
            <div class="dropdown">
              <div class="btn-group">
                <a class="btn btn-primary">dropdown button</a>
                <a class="btn btn-primary dropdown-toggle" tabindex="0"><i class="icon icon-caret"></i></a>
                <ul class="menu">
                  <li class="menu-item">
                    <a href="#dropdowns">
                      Slack
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="#dropdowns">
                      Hipchat
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="#dropdowns">
                      Skype
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="column col-xs-12">
            <div class="dropdown">
              <a class="btn btn-link dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a>
              <ul class="menu">
                <li class="menu-item">
                  <a href="#dropdowns">
                    Slack
                  </a>
                </li>
                <li class="menu-item">
                  <a href="#dropdowns">
                    Hipchat
                  </a>
                </li>
                <li class="menu-item">
                  <a href="#dropdowns">
                    Skype
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="docs-note">
          <p>Dropdown menus component is built entirely in CSS. It is triggered by <code>:focus</code> event.</p>
          <p>Add a container element with the <code>dropdown</code> class. And add a focusable element with the <code>dropdown-toggle</code> class for the button and a <code>menu</code> component right next to it. You also need to add <code>tabindex</code> to make the buttons focusable.</p>
          <p>If the dropdown is close to the right edge of the browser, you can add the <code>dropdown-right</code> class to the container to prevent it appearing off screen.</p>
        </div>
        <div class="columns">
          <div class="column col-xs-12 text-right">
            <div class="dropdown dropdown-right">
              <a class="btn btn-primary dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a>
              <ul class="menu text-left">
                <li class="menu-item">
                  <a href="#dropdowns">Slack</a>
                </li>
                <li class="menu-item">
                  <a href="#dropdowns">Hipchat</a>
                </li>
                <li class="menu-item">
                  <a href="#dropdowns">Skype</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="docs-note">
          <p>Also, you can implement your JS to interact with the dropdown menus by adding the <code>active</code> class to the <code>dropdown</code> container.</p>
        </div>

<!-- dropdowns -->
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- basic dropdown button --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;dropdown&quot;</span>&gt;
  &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link dropdown-toggle&quot;</span> <span class="atn">tabindex</span>=<span class="atv">&quot;0&quot;</span>&gt;
    dropdown menu &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-caret&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
  &lt;<span class="tag">/a</span>&gt;
  <span class="com">&lt;!-- menu component --&gt;</span>
  &lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;menu&quot;</span>&gt;
    ...
  &lt;<span class="tag">/ul</span>&gt;
&lt;<span class="tag">/div</span>&gt;

<span class="com">&lt;!-- dropdown button group --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;dropdown&quot;</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;btn-group&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
      dropdown button
    &lt;<span class="tag">/a</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn dropdown-toggle&quot;</span> <span class="atn">tabindex</span>=<span class="atv">&quot;0&quot;</span>&gt;
      &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-caret&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
    &lt;<span class="tag">/a</span>&gt;

    <span class="com">&lt;!-- menu component --&gt;</span>
    &lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;menu&quot;</span>&gt;
      ...
    &lt;<span class="tag">/ul</span>&gt;
  &lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>

      </div>

      <div id="modals" class="container">
        <h3 class="s-title"><a href="#modals" class="anchor" aria-hidden="true">#</a>Modals</h3>
        <div class="docs-note">
          <p>Modals are flexible dialog prompts.</p>
        </div>
        <div class="columns">
          <div class="column">
            <a href="#example-modal-1" class="btn btn-primary">Open Modal</a>
            <div class="modal" id="example-modal-1">
              <a href="#modals" class="modal-overlay" aria-label="Close"></a>
              <div class="modal-container" role="document">
                <div class="modal-header">
                  <a href="#modals" class="btn btn-clear float-right" aria-label="Close"></a>
                  <div class="modal-title h5">Modal title</div>
                </div>
                <div class="modal-body">
                  <div class="content">
                    <p>This is the content inside the modal.</p>
                    <h4>Lorem ipsum</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
                    <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p>
                    <h4>Cupcake ipsum</h4>
                    <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p>
                    <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p>
                    <h4>Candy ipsum</h4>
                    <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p>
                    <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p>
                  </div>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-primary">Share</button>
                  <a href="#modals" class="btn btn-link">Close</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="docs-note">
          <p>Add a container element with the <code>modal</code> class. And add a real container <code>modal-container</code> and overlay <code>modal-overlay</code> inside it. You can add child elements with the <code>modal-header</code>, <code>modal-body</code> and <code>modal-footer</code> - any or all of them. </p>
          <p>Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the <code>active</code> class to the <code>modal</code> container.</p>
        </div>

<!-- modals example -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal active&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;modal-id&quot;</span>&gt;
  &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#close&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;modal-overlay&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-container&quot;</span>&gt;
    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-header&quot;</span>&gt;
      &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#close&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear float-right&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
      &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-title h5&quot;</span>&gt;Modal title&lt;<span class="tag">/div</span>&gt;
    &lt;<span class="tag">/div</span>&gt;
    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-body&quot;</span>&gt;
      &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;content&quot;</span>&gt;
        <span class="com">&lt;!-- content here --&gt;</span>
      &lt;<span class="tag">/div</span>&gt;
    &lt;<span class="tag">/div</span>&gt;
    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-footer&quot;</span>&gt;
      ...
    &lt;<span class="tag">/div</span>&gt;
  &lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>

        <h4 id="modals-sizes" class="s-subtitle">Modal sizes</h4>
        <div class="columns">
          <div class="column col-6 col-xs-12">
            <a href="#example-modal-2" class="btn btn-primary">Open small size Modal</a>
            <div class="modal modal-sm" id="example-modal-2">
              <a href="#modals-sizes" class="modal-overlay" aria-label="Close"></a>
              <div class="modal-container" role="document">
                <div class="modal-header">
                  <a href="#modals-sizes" class="btn btn-clear float-right" aria-label="Close"></a>
                  <div class="modal-title h5">Modal title</div>
                </div>
                <div class="modal-body">
                  <div class="content">
                    <form>
                      <div class="form-group">
                        <label class="form-label" for="input-example-7">Name</label>
                        <input class="form-input" type="text" id="input-example-7" placeholder="Name">
                      </div>
                      <div class="form-group">
                        <label class="form-label">Gender</label>
                        <label class="form-radio">
                          <input type="radio" name="gender">
                          <i class="form-icon"></i> Male
                        </label>
                        <label class="form-radio">
                          <input type="radio" name="gender" checked>
                          <i class="form-icon"></i> Female
                        </label>
                      </div>
                    </form>
                  </div>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-primary">Submit</button>
                  <a href="#modals-sizes" class="btn btn-link" aria-label="Close">Close</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="docs-note">
          <p>Use the <code>modal-sm</code> class for a smaller modal dialog. The container max width is <code>320px</code>.</p>
        </div>
        <div class="columns">
          <div class="column">
            <a href="#example-modal-3" class="btn btn-primary">Open large size Modal</a>
            <div class="modal modal-lg" id="example-modal-3">
              <a href="#modals-sizes" class="modal-overlay" aria-label="Close"></a>
              <div class="modal-container" role="document">
                <div class="modal-header">
                  <a href="#modals-sizes" class="btn btn-clear float-right" aria-label="Close"></a>
                  <div class="modal-title h5">Modal title</div>
                </div>
                <div class="modal-body">
                  <div class="content">
                    <p>This is the content inside the modal.</p>
                    <h4>Lorem ipsum</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
                    <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p>
                    <h4>Cupcake ipsum</h4>
                    <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p>
                    <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p>
                    <h4>Candy ipsum</h4>
                    <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p>
                    <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p>
                  </div>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-primary">Share</button>
                  <a href="#modals-sizes" class="btn btn-link">Close</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="docs-note">
          <p>Use the <code>modal-lg</code> class for a full size modal. The container max width is <code>960px</code>.</p>
        </div>

<!-- modals -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal modal-sm&quot;</span>&gt;
  &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#close&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;modal-overlay&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-container&quot;</span>&gt;
    <span class="com">&lt;!-- modal structure here --&gt;</span>
  &lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>

      </div>

      <div id="navs" class="container">
        <h3 class="s-title"><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h3>
        <div class="columns">
          <div class="column col-6 col-xs-12">
            <ul class="nav">
              <li class="nav-item">
                <a href="#nav">Elements</a>
              </li>
              <li class="nav-item active">
                <a href="#nav">Layout</a>
                <ul class="nav">
                  <li class="nav-item">
                    <a href="#nav">Flexbox grid</a>
                  </li>
                  <li class="nav-item">
                    <a href="#nav">Responsive</a>
                  </li>
                  <li class="nav-item">
                    <a href="#nav">Navbar</a>
                  </li>
                  <li class="nav-item">
                    <a href="#nav">Empty states</a>
                  </li>
                </ul>
              </li>
              <li class="nav-item">
                <a href="#nav">Components</a>
              </li>
              <li class="nav-item">
                <a href="#nav">Utilities</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="docs-note">
          <p>Add a container element with the <code>nav</code> class. And add child elements with the <code>nav-item</code> class. The <code>nav-item</code> with the <code>active</code> class will be highlighted.</p>
        </div>

<!-- navs -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;nav&quot;</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Elements&lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item active&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Layout&lt;<span class="tag">/a</span>&gt;
    &lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;nav&quot;</span>&gt;
      &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item&quot;</span>&gt;
        &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Flexbox grid&lt;<span class="tag">/a</span>&gt;
      &lt;<span class="tag">/li</span>&gt;
      &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item&quot;</span>&gt;
        &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Responsive&lt;<span class="tag">/a</span>&gt;
      &lt;<span class="tag">/li</span>&gt;
      &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item&quot;</span>&gt;
        &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Navbar&lt;<span class="tag">/a</span>&gt;
      &lt;<span class="tag">/li</span>&gt;
      &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item&quot;</span>&gt;
        &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Empty states&lt;<span class="tag">/a</span>&gt;
      &lt;<span class="tag">/li</span>&gt;
    &lt;<span class="tag">/ul</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Components&lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Utilities&lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
&lt;<span class="tag">/ul</span>&gt;
</code></pre>

      </div>

      <div id="pagination" class="container">
        <h3 class="s-title"><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h3>
        <div class="columns">
          <div class="column col-xs-12">
            <ul class="pagination">
              <li class="page-item">
                <a href="#pagination">Prev</a>
              </li>
              <li class="page-item">
                <a href="#pagination">1</a>
              </li>
              <li class="page-item">
                <span>...</span>
              </li>
              <li class="page-item">
                <a href="#pagination">4</a>
              </li>
              <li class="page-item active">
                <a href="#pagination">5</a>
              </li>
              <li class="page-item">
                <a href="#pagination">6</a>
              </li>
              <li class="page-item">
                <span>...</span>
              </li>
              <li class="page-item">
                <a href="#pagination">9</a>
              </li>
              <li class="page-item">
                <a href="#pagination">Next</a>
              </li>
            </ul>
          </div>
          <div class="column col-xs-12">
            <ul class="pagination">
              <li class="page-item disabled">
                <a href="#pagination" tabindex="-1">Prev</a>
              </li>
              <li class="page-item active">
                <a href="#pagination">1</a>
              </li>
              <li class="page-item">
                <a href="#pagination">2</a>
              </li>
              <li class="page-item">
                <a href="#pagination">3</a>
              </li>
              <li class="page-item">
                <span>...</span>
              </li>
              <li class="page-item">
                <a href="#pagination">9</a>
              </li>
              <li class="page-item">
                <a href="#pagination">Next</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="docs-note">
          <p>Add a container element with the <code>pagination</code> class. And add child elements with the <code>page-item</code> class. The <code>page-item</code> with the <code>active</code> class will be highlighted. You can add the <code>disabled</code> to the <code>page-item</code> to have unclickable page links. </p>
        </div>

<!-- pagination -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;pagination&quot;</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item disabled&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">tabindex</span>=<span class="atv">&quot;-1&quot;</span>&gt;Previous&lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item active&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;1&lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;2&lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;3&lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
    &lt;<span class="tag">span</span>&gt;...&lt;<span class="tag">/span</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;12&lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Next&lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
&lt;<span class="tag">/ul</span>&gt;
</code></pre>

        <div class="columns">
          <div class="column col-12">
            <ul class="pagination">
              <li class="page-item page-prev">
                <a href="#pagination">
                  <div class="page-item-subtitle">Previous</div>
                  <div class="page-item-title h5">Getting started</div>
                </a>
              </li>
              <li class="page-item page-next">
                <a href="#pagination">
                  <div class="page-item-subtitle">Next</div>
                  <div class="page-item-title h5">Layout</div>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="docs-note">
          <p>You could use previous and next pagination to navigate. </p>
        </div>

<!-- pagination -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;pagination&quot;</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item page-prev&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
      &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;page-item-subtitle&quot;</span>&gt;Previous&lt;<span class="tag">/div</span>&gt;
      &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;page-item-title h5&quot;</span>&gt;Getting started&lt;<span class="tag">/div</span>&gt;
    &lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item page-next&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
      &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;page-item-subtitle&quot;</span>&gt;Next&lt;<span class="tag">/div</span>&gt;
      &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;page-item-title h5&quot;</span>&gt;Layout&lt;<span class="tag">/div</span>&gt;
    &lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
&lt;<span class="tag">/ul</span>&gt;
</code></pre>

      </div>

      <div id="panels" class="container">
        <h3 class="s-title"><a href="#panels" class="anchor" aria-hidden="true">#</a>Panels</h3>
        <div class="docs-note">
          <p>Panels are flexible view container with auto-expand content section.</p>
        </div>
        <div class="columns">
          <div class="column col-6 col-xs-12">
            <div class="panel">
              <div class="panel-header text-center">
                <figure class="avatar avatar-lg">
                  <img src="img/avatar-2.png" alt="Avatar">
                </figure>
                <div class="panel-title h5 mt-10">Bruce Banner</div>
                <div class="panel-subtitle">THE HULK</div>
              </div>
              <nav class="panel-nav">
                <ul class="tab tab-block">
                  <li class="tab-item active">
                    <a href="#panels">
                      Profile
                    </a>
                  </li>
                  <li class="tab-item">
                    <a href="#panels">
                      Files
                    </a>
                  </li>
                  <li class="tab-item">
                    <a href="#panels">
                      Tasks
                    </a>
                  </li>
                </ul>
              </nav>
              <div class="panel-body">
                <div class="tile tile-centered">
                  <div class="tile-content">
                    <div class="tile-title">E-mail</div>
                    <div class="tile-subtitle">bruce.banner@hulk.com</div>
                  </div>
                  <div class="tile-action">
                    <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button>
                  </div>
                </div>
                <div class="tile tile-centered">
                  <div class="tile-content">
                    <div class="tile-title">Skype</div>
                    <div class="tile-subtitle">bruce.banner</div>
                  </div>
                  <div class="tile-action">
                    <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button>
                  </div>
                </div>
                <div class="tile tile-centered">
                  <div class="tile-content">
                    <div class="tile-title">Location</div>
                    <div class="tile-subtitle">Dayton, Ohio</div>
                  </div>
                  <div class="tile-action">
                    <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button>
                  </div>
                </div>
              </div>
              <div class="panel-footer">
                <button class="btn btn-primary btn-block">Save</button>
              </div>
            </div>
          </div>
          <div class="column col-6 col-xs-12">
            <div class="panel">
              <div class="panel-header">
                <div class="panel-title h6">Comments</div>
              </div>
              <div class="panel-body">
                <div class="tile">
                  <div class="tile-icon">
                    <figure class="avatar">
                      <img src="img/avatar-1.png" alt="Avatar">
                    </figure>
                  </div>
                  <div class="tile-content">
                    <p class="tile-title">Thor Odinson</p>
                    <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
                  </div>
                </div>
                <div class="tile">
                  <div class="tile-icon">
                    <figure class="avatar">
                      <img src="img/avatar-2.png" alt="Avatar">
                    </figure>
                  </div>
                  <div class="tile-content">
                    <p class="tile-title">Bruce Banner</p>
                    <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
                  </div>
                </div>
                <div class="tile">
                  <div class="tile-icon">
                    <figure class="avatar" data-initial="TS"></figure>
                  </div>
                  <div class="tile-content">
                    <p class="tile-title">Tony Stark</p>
                    <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
                  </div>
                </div>
                <div class="tile">
                  <div class="tile-icon">
                    <figure class="avatar">
                      <img src="img/avatar-4.png" alt="Avatar">
                    </figure>
                  </div>
                  <div class="tile-content">
                    <p class="tile-title">Steve Rogers</p>
                    <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
                  </div>
                </div>
                <div class="tile">
                  <div class="tile-icon">
                    <figure class="avatar">
                      <img src="img/avatar-3.png" alt="Avatar">
                    </figure>
                  </div>
                  <div class="tile-content">
                    <p class="tile-title">Natasha Romanoff</p>
                    <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
                  </div>
                </div>
              </div>
              <div class="panel-footer">
                <div class="input-group">
                  <input type="text" class="form-input" placeholder="Hello">
                  <button class="btn btn-primary input-group-btn">Send</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="docs-note">
          <p>Add a container element with the <code>panel</code> class. And add child elements with the <code>panel-header</code>, <code>panel-nav</code>, <code>panel-body</code> and/or <code>panel-footer</code> class. The <code>panel-body</code> can be auto expanded and vertically scrollable. </p>
        </div>
  
<!-- panels -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;panel&quot;</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;panel-header&quot;</span>&gt;
    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;panel-title&quot;</span>&gt;Comments&lt;<span class="tag">/div</span>&gt;
  &lt;<span class="tag">/div</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;panel-nav&quot;</span>&gt;
    <span class="com">&lt;!-- navigation components: tabs, breadcrumbs or pagination --&gt;</span>
  &lt;<span class="tag">/div</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;panel-body&quot;</span>&gt;
    <span class="com">&lt;!-- contents --&gt;</span>
  &lt;<span class="tag">/div</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;panel-footer&quot;</span>&gt;
    <span class="com">&lt;!-- buttons or inputs --&gt;</span>
  &lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>
  
      </div>

      <div id="popovers" class="container">
        <h3 class="s-title"><a href="#popovers" class="anchor" aria-hidden="true">#</a>Popovers</h3>
        <div class="docs-note">
          <p>Popovers are small overlay content containers. Popovers component is built entirely in CSS.</p>
        </div>
        <div class="columns">
          <div class="column col-3 col-sm-6">
            <div class="popover">
              <a href="#popovers" class="btn btn-primary">
                top popover
              </a>
              <div class="popover-container">
                <div class="card">
                  <div class="card-header">
                    <div class="card-title h5">Apple</div>
                    <div class="card-subtitle text-gray">Software and hardware</div>
                  </div>
                  <div class="card-body">
                    To make a contribution to the world by making tools for the mind that advance humankind.
                  </div>
                  <div class="card-footer">
                    <button class="btn btn-primary">Buy</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="column col-3 col-sm-6">
            <div class="popover popover-right">
              <a href="#popovers" class="btn btn-primary">
                right popover
              </a>
              <div class="popover-container">
                <div class="card">
                  <div class="card-header">
                    <div class="card-title h5">Apple</div>
                    <div class="card-subtitle text-gray">Software and hardware</div>
                  </div>
                  <div class="card-body">
                    To make a contribution to the world by making tools for the mind that advance humankind.
                  </div>
                  <div class="card-footer">
                    <button class="btn btn-primary">Buy</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="column col-3 col-sm-6">
            <div class="popover popover-bottom">
              <a href="#popovers" class="btn btn-primary">
                bottom popover
              </a>
              <div class="popover-container">
                <div class="card">
                  <div class="card-header">
                    <div class="card-title h5">Apple</div>
                    <div class="card-subtitle text-gray">Software and hardware</div>
                  </div>
                  <div class="card-body">
                    To make a contribution to the world by making tools for the mind that advance humankind.
                  </div>
                  <div class="card-footer">
                    <button class="btn btn-primary">Buy</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="column col-3 col-sm-6">
            <div class="popover popover-left">
              <a href="#popovers" class="btn btn-primary">
                left popover
              </a>
              <div class="popover-container">
                <div class="card">
                  <div class="card-header">
                    <div class="card-title h5">Apple</div>
                    <div class="card-subtitle text-gray">Software and hardware</div>
                  </div>
                  <div class="card-body">
                    To make a contribution to the world by making tools for the mind that advance humankind.
                  </div>
                  <div class="card-footer">
                    <button class="btn btn-primary">Buy</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="docs-note">
          <p>Wrap an element by a container with the <code>popover</code> class. And add a container with the <code>popover-container</code> next to the element. You can use <a href="#cards">Cards</a> component inside the <code>popover-container</code>. </p>
          <p>Also, you can add the <code>popover-right</code>, <code>popover-bottom</code> or <code>popover-left</code> class to define the position. By default, the popovers appear above the element.</p>
        </div>

<!-- popovers -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;popover popover-right&quot;</span>&gt;
  &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;right popover&lt;<span class="tag">/button</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;popover-container&quot;</span>&gt;
    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card&quot;</span>&gt;
      &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-header&quot;</span>&gt;
        ...
      &lt;<span class="tag">/div</span>&gt;
      &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-body&quot;</span>&gt;
        ...
      &lt;<span class="tag">/div</span>&gt;
      &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-footer&quot;</span>&gt;
        ...
      &lt;<span class="tag">/div</span>&gt;
    &lt;<span class="tag">/div</span>&gt;
  &lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>

      </div>

      <div id="steps" class="container">
        <h3 class="s-title"><a href="#steps" class="anchor" aria-hidden="true">#</a>Steps</h3>
        <div class="docs-note">
          <p>Steps are progress indicators of a sequence of task steps.</p>
        </div>
        <div class="columns">
          <div class="column col-12">
            <ul class="step">
              <li class="step-item">
                <a href="#steps" class="tooltip" data-tooltip="Step 1 Tooltip"></a>
              </li>
              <li class="step-item active">
                <a href="#steps" class="tooltip" data-tooltip="Step 2 Tooltip"></a>
              </li>
              <li class="step-item">
                <a href="#steps" class="tooltip" data-tooltip="Step 3 Tooltip"></a>
              </li>
              <li class="step-item">
                <a href="#steps" class="tooltip" data-tooltip="Step 4 Tooltip"></a>
              </li>
            </ul>
          </div>
          <div class="column col-12">
            <ul class="step">
              <li class="step-item">
                <a href="#steps" class="tooltip" data-tooltip="Step 1 Tooltip">Step 1</a>
              </li>
              <li class="step-item">
                <a href="#steps" class="tooltip" data-tooltip="Step 2 Tooltip">Step 2</a>
              </li>
              <li class="step-item active">
                <a href="#steps" class="tooltip" data-tooltip="Step 3 Tooltip">Step 3</a>
              </li>
              <li class="step-item">
                <a href="#steps" class="tooltip" data-tooltip="Step 4 Tooltip">Step 4</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="docs-note">
          <p>Add a container element with the <code>step</code> class. And add child elements with the <code>step-item</code> class. The <code>step-item</code> with the <code>active</code> class will be highlighted and indicate the current state of progress.</p>
        </div>

<!-- steps -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;step&quot;</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;step-item&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;tooltip&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;Step 1&quot;</span>&gt;Step 1&lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;step-item active&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;tooltip&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;Step 2&quot;</span>&gt;Step 2&lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;step-item&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;tooltip&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;Step 3&quot;</span>&gt;Step 3&lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;step-item&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;tooltip&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;Step 4&quot;</span>&gt;Step 4&lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
&lt;<span class="tag">/ul</span>&gt;
</code></pre>

      </div>

      <div id="tabs" class="container">
        <h3 class="s-title"><a href="#tabs" class="anchor" aria-hidden="true">#</a>Tabs</h3>
        <div class="docs-note">
          <p>Tabs enable quick switch between different views.</p>
        </div>
        <div class="columns">
          <div class="column col-6 col-sm-12">
            <ul class="tab">
              <li class="tab-item active">
                <a href="#tabs">
                  Music
                </a>
              </li>
              <li class="tab-item">
                <a href="#tabs">
                  Playlists
                </a>
              </li>
              <li class="tab-item">
                <a href="#tabs">
                  Radio
                </a>
              </li>
              <li class="tab-item">
                <a href="#tabs">
                  Store
                </a>
              </li>
            </ul>
          </div>
          <div class="column col-6 col-sm-12">
            <ul class="tab tab-block">
              <li class="tab-item active">
                <a href="#tabs">
                  Music
                </a>
              </li>
              <li class="tab-item">
                <a href="#tabs">
                  Playlists
                </a>
              </li>
              <li class="tab-item">
                <a href="#tabs">
                  Radio
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="docs-note">
          <p>Add a container element with the <code>tab</code> class. And add child elements with the <code>tab-item</code> class. You can add the <code>tab-block</code> class for a full-width tab. The <code>tab-item</code> or its child &lt;a&gt; with the <code>active</code> class will be highlighted.</p>
        </div>

<!-- tabs -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;tab tab-block&quot;</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item active&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Music&lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;active&quot;</span>&gt;Playlists&lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Radio&lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Connect&lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
&lt;<span class="tag">/ul</span>&gt;
</code></pre>

        <div class="columns">
          <div class="column col-sm-12">
            <ul class="tab">
              <li class="tab-item active">
                <a href="#tabs" class="badge" data-badge="999">
                  Music
                </a>
              </li>
              <li class="tab-item">
                <a href="#tabs">
                  Playlists
                </a>
              </li>
              <li class="tab-item">
                <a href="#tabs">
                  Radio
                </a>
              </li>
            </ul>
          </div>
          <div class="column col-sm-12">
            <ul class="tab tab-block">
              <li class="tab-item active">
                <a href="#tabs" class="badge" data-badge="9">
                  Music
                </a>
              </li>
              <li class="tab-item">
                <a href="#tabs" class="badge" data-badge="99">
                  Playlists
                </a>
              </li>
              <li class="tab-item">
                <a href="#tabs">
                  Radio
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="docs-note">
          <p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>. </p>
        </div>

<!-- tabs with badges -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;tab tab-block&quot;</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item active&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;badge&quot;</span> <span class="atn">data-badge</span>=<span class="atv">&quot;9&quot;</span>&gt;
      Music
    &lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
&lt;<span class="tag">/ul</span>&gt;
</code></pre>

        <div class="columns">
          <div class="column col-12">
            <ul class="tab">
              <li class="tab-item active">
                <a href="#tabs">
                  Music
                  <span class="btn btn-clear"></span>
                </a>
              </li>
              <li class="tab-item">
                <a href="#tabs">
                  Playlists
                </a>
              </li>
              <li class="tab-item">
                <a href="#tabs">
                  Radio
                </a>
              </li>
              <li class="tab-item">
                <a href="#tabs">
                  Store
                </a>
              </li>
              <li class="tab-item tab-action">
                <div class="input-group input-inline">
                  <input class="form-input input-sm" type="text" placeholder="search">
                  <button class="btn btn-primary btn-sm input-group-btn">Search</button>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="docs-note">
          <p>You could add a search box or buttons inside a tab. Add the <code>tab-action</code> class to the <code>tab-item</code>. </p>
        </div>

<!-- tabs with badges -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;tab&quot;</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item active&quot;</span>&gt;
    &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
      Music
    &lt;<span class="tag">/a</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
  &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item tab-action&quot;</span>&gt;
    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;input-group input-inline&quot;</span>&gt;
      &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input input-sm&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;search&quot;</span>&gt;
      &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary btn-sm input-group-btn&quot;</span>&gt;Search&lt;<span class="tag">/button</span>&gt;
    &lt;<span class="tag">/div</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
&lt;<span class="tag">/ul</span>&gt;
</code></pre>

      </div>

      <div id="tiles" class="container">
        <h3 class="s-title"><a href="#tiles" class="anchor" aria-hidden="true">#</a>Tiles</h3>
        <div class="docs-note">
          <p>Tiles are repeatable or embeddable information blocks.</p>
        </div>
        <div class="columns">
          <div class="column col-9 col-sm-12">
            <div class="tile">
              <div class="tile-icon">
                <figure class="avatar avatar-lg">
                  <img src="img/avatar-3.png" alt="Avatar">
                </figure>
              </div>
              <div class="tile-content">
                <p class="tile-title">The Avengers</p>
                <p class="tile-subtitle text-gray">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
              </div>
              <div class="tile-action">
                <button class="btn btn-primary">Join</button>
                <button class="btn">Contact</button>
              </div>
            </div>
          </div>
          <div class="column col-9 col-sm-12">
            <div class="tile">
              <div class="tile-icon">
                <figure class="avatar avatar-lg">
                  <img src="img/avatar-2.png" alt="Avatar">
                </figure>
              </div>
              <div class="tile-content">
                <p class="tile-title">The S.H.I.E.L.D.</p>
                <p class="tile-subtitle text-gray">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
                <p>
                  <button class="btn btn-primary btn-sm">Join</button>
                  <button class="btn btn-sm">Contact</button>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="docs-note">
          <p>Add a container with the <code>tile</code> class. And add child elements with the <code>tile-icon</code>, <code>tile-content</code> or/and <code>tile-action</code> classes. The <code>tile-icon</code> and <code>tile-action</code> are optional.</p>
          <p>There are <code>tile-title</code> and <code>tile-subtitle</code> classes for title and subtitle text styles.</p>
        </div>

<!-- tiles -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile&quot;</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-icon&quot;</span>&gt;
    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;example-tile-icon&quot;</span>&gt;
      &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-file centered&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
    &lt;<span class="tag">/div</span>&gt;
  &lt;<span class="tag">/div</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-content&quot;</span>&gt;
    &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;tile-title&quot;</span>&gt;The Avengers&lt;<span class="tag">/p</span>&gt;
    &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;tile-subtitle text-gray&quot;</span>&gt;Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...&lt;<span class="tag">/p</span>&gt;
  &lt;<span class="tag">/div</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-action&quot;</span>&gt;
    &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;Join&lt;<span class="tag">/button</span>&gt;
  &lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>

        <h4 id="tiles-compact" class="s-subtitle">Compact tiles</h4>
        <div class="docs-note">
          <p>There is compact version of Tiles component, which is often used as contact and file info blocks.</p>
          <p>Add the <code>tile-centered</code> class to the container <code>tile</code>. The <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code> will be vertically centered.</p>
        </div>
        <div class="columns">
          <div class="column col-6 col-md-9 col-xs-12">
            <div class="tile tile-centered">
              <div class="tile-icon">
                <div class="example-tile-icon">
                  <i class="icon icon-mail centered"></i>
                </div>
              </div>
              <div class="tile-content">
                <div class="tile-title">spectre-docs.pdf</div>
                <div class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</div>
              </div>
              <div class="tile-action">
                <button class="btn btn-link btn-action"><i class="icon icon-more-vert"></i></button>
              </div>
            </div>
          </div>
        </div>

<!-- tiles -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile tile-centered&quot;</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-icon&quot;</span>&gt;
    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;example-tile-icon&quot;</span>&gt;
      &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-file centered&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
    &lt;<span class="tag">/div</span>&gt;
  &lt;<span class="tag">/div</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-content&quot;</span>&gt;
    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-title&quot;</span>&gt;spectre-docs.pdf&lt;<span class="tag">/div</span>&gt;
    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-subtitle text-gray&quot;</span>&gt;14MB · Public · 1 Jan, 2017&lt;<span class="tag">/div</span>&gt;
  &lt;<span class="tag">/div</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-action&quot;</span>&gt;
    &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;
      &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-more-vert&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
    &lt;<span class="tag">/button</span>&gt;
  &lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>

      </div>

      <div id="toasts" class="container">
        <h3 class="s-title"><a href="#toasts" class="anchor" aria-hidden="true">#</a>Toasts</h3>
        <div class="docs-note">
          <p>Toasts are used to show alert or information to users.</p>
        </div>
        <div class="columns">
          <div class="column col-9 col-sm-12">
            <div class="toast">
              <button class="btn btn-clear float-right"></button>
              <h6>Toast Title</h6>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
          </div>
          <div class="column col-9 col-sm-12">
            <div class="toast toast-primary">
              <button class="btn btn-clear float-right"></button>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
          </div>
        </div>
        <div class="docs-note">
          <p>Add a container element with the <code>toast</code> class. You can add any text within the container, and even icons. You may also add a close button with the <code>btn-clear</code> class if you need. </p>
        </div>
        <div class="columns">
          <div class="column col-sm-12">
            <div class="toast toast-success">
              <button class="btn btn-clear float-right"></button>
              Toast success
            </div>
          </div>
          <div class="column col-sm-12">
            <div class="toast toast-warning">
              <button class="btn btn-clear float-right"></button>
              Toast warning
            </div>
          </div>
          <div class="column col-sm-12">
            <div class="toast toast-error">
              <button class="btn btn-clear float-right"></button>
              Toast error
            </div>
          </div>
        </div>
        <div class="docs-note">
          <p>And you can add the <code>toast-primary</code>, <code>toast-success</code>, <code>toast-warning</code> or <code>toast-error</code> class for additional toast colors.</p>
        </div>

<!-- toasts -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;toast&quot;</span>&gt;
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
&lt;<span class="tag">/div</span>&gt;

&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;toast toast-primary&quot;</span>&gt;
  &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear float-right&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
&lt;<span class="tag">/div</span>&gt;
</code></pre>

      </div>

      <div id="tooltips" class="container">
        <h3 class="s-title"><a href="#tooltips" class="anchor" aria-hidden="true">#</a>Tooltips</h3>
        <div class="docs-note">
          <p>Tooltips provide context information labels that appear on hover and focus.</p>
        </div>
        <div class="columns text-center">
          <div class="column col-xs-12">
            <button class="btn btn-primary tooltip" data-tooltip="Top Tooltip Text">top tooltip</button>
          </div>
          <div class="column col-xs-12">
            <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Right Tooltip Text">right tooltip</button>
          </div>
          <div class="column col-xs-12">
            <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Bottom Tooltip Text">bottom tooltip</button>
          </div>
          <div class="column col-xs-12">
            <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Left Tooltip Text">left tooltip</button>
          </div>
        </div>
        <div class="docs-note">
          <p>Tooltips component is built entirely in CSS.</p>
          <p>Add the <code>tooltip</code> class and the <code>data-tooltip</code> attribute, which contains the tooltip content, to non self closing elements. And add the <code>tooltip-right</code>, <code>tooltip-bottom</code> or <code>tooltip-left</code> class to define the position of a tooltip. By default, the tooltip appears above the element.</p>
        </div>

<!-- tooltips -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn tooltip&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;Lorem ipsum dolor sit amet&quot;</span>&gt;top tooltip&lt;<span class="tag">/button</span>&gt;
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn tooltip tooltip-right&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;Lorem ipsum dolor sit amet&quot;</span>&gt;right tooltip&lt;<span class="tag">/button</span>&gt;
</code></pre>

      </div>

      <footer class="docs-footer">
        <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p>
        <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
      </footer>

    </div>
  </div>

  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-2702768-8', 'auto');
    ga('send', 'pageview');
  </script>
</body>
</html>
